# FieldWrapper

The `<FieldWrapper>` component is a utility belt that wraps around form elements.

It is used to render data about the field such as label, description text, hint text as well as validation text & color.

## Import

```jsx
import { FieldWrapper } from 'bumbag'
```

## Usage

```jsx-live
<FieldWrapper label="Username">
  <Input />
</FieldWrapper>
```

### Descriptions

The description text is placed underneath the label.

```jsx-live
<FieldWrapper label="Username" description="Required for your bumbag">
  <Input />
</FieldWrapper>
```

### Hints

The hint text is placed underneath the field child.

```jsx-live
<FieldWrapper label="Username" hint="Must be awesome">
  <Input />
</FieldWrapper>
```

### Optional fields

To indicate a field as optional, add the `isOptional` prop.

```jsx-live
<FieldWrapper label="Username" isOptional>
  <Input />
</FieldWrapper>
```

### Required fields

```jsx-live
<FieldWrapper label="Username" isRequired>
  <Input />
</FieldWrapper>
```

### States

```jsx-live
<FieldStack spacing="major-4">
  <FieldWrapper
    label="Username"
    validationText="This is an invalid name"
    state="danger"
  >
    <Input defaultValue="Jake" />
  </FieldWrapper>
  <FieldWrapper
    label="Username"
    validationText="Please check the box!"
    state="primary"
    marginTop="major-2"
  >
    <Input defaultValue="Jake" />
  </FieldWrapper>
  <FieldWrapper
    label="Username"
    validationText="Nice one!"
    state="success"
    marginTop="major-2"
  >
    <Input defaultValue="Jake" />
  </FieldWrapper>
</FieldStack>
```

### Tooltips

You can show a tooltip by supplying a string or an element to the `tooltip` prop.

```jsx-live
<FieldWrapper label="Username" tooltip="Your username must be awesome.">
  <Input />
</FieldWrapper>
```

```jsx-live
<FieldWrapper
  label="Username"
  tooltip={
    <Text fontSize="150">Your username must be <Text fontWeight="bold">awesome.</Text></Text>
  }
>
  <Input />
</FieldWrapper>
```

#### Custom tooltip trigger

You can modify the tooltip trigger button by supplying an element to the `tooltipTrigger` prop.

```jsx-live
<FieldWrapper
  label="Username"
  tooltip="Your username must be awesome."
  tooltipTriggerComponent={<Button size="small" minHeight="unset">Tooltip</Button>}
>
  <Input />
</FieldWrapper>
```

Or you can set a default trigger via `defaultProps` [in the theme](/theming)

### Custom label

```jsx-live
<FieldWrapper label={<Text color="primary">Username</Text>}>
  <Input />
</FieldWrapper>
```

### Custom description

```jsx-live
<FieldWrapper
  a11yId="username"
  label="Username"
  description={<Text color="primary">Required for your bumbag</Text>}
>
  <Input />
</FieldWrapper>
```

### Custom hints

```jsx-live
<FieldWrapper
  a11yId="username"
  label="Username"
  hint={<Text color="primary">Must be awesome</Text>}
>
  <Input />
</FieldWrapper>
```

## Props

### FieldWrapper Props

<!-- Automatically generated -->

**<Code fontSize="150" marginRight="major-1">children</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>
  | (({ elementProps }: { ...; }) => ReactNode)`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">description</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the description text of the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">hint</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the bottom hint text of the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isOptional</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Sets the optional flag (and displays optional text) on the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">isRequired</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

Sets the required flag (and a required astrix) on the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">label</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the label on the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">labelType</Code>** <Code fontSize="100" palette="primary">&#34;label&#34; | &#34;legend&#34;</Code> 

Sets the label type on the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">state</Code>** <Code fontSize="100" palette="primary">&#34;success&#34; | &#34;danger&#34; | &#34;warning&#34;</Code> 

Sets the state of the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">tooltip</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the tooltip of the field wrapper. Can be either a string, or a React component.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">tooltipTriggerComponent</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>`}
</Code>

Sets the tooltip trigger component.

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">validationText</Code>** <Code fontSize="100" palette="primary">string</Code> 

Sets the bottom validation text of the field wrapper.

<Divider marginTop="major-2" marginBottom="major-2" />

<details><Box use="summary" marginBottom="major-2">Inherits <strong><code>Box</code></strong> props</Box>

**<Code fontSize="150" marginRight="major-1">use</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">className</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignX</Code>** <Code fontSize="100" palette="primary">&#34;right&#34; | &#34;left&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">alignY</Code>** <Code fontSize="100" palette="primary">&#34;top&#34; | &#34;bottom&#34; | &#34;center&#34;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">variant</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">colorMode</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">disabled</Code>** <Code fontSize="100" palette="primary">boolean</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">overrides</Code>**  

<Code isBlock palette="primary" fontSize="150" padding="minor-1" marginBottom="major-2">
{`{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 96 more ...;
  Template?: TemplateThemeConfig;
}`}
</Code>

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">elementRef</Code>** <Code fontSize="100" palette="primary">((instance: any) =&#62; void) | RefObject&#60;any&#62;</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

**<Code fontSize="150" marginRight="major-1">themeKey</Code>** <Code fontSize="100" palette="primary">string</Code> 

<Divider marginTop="major-2" marginBottom="major-2" />

</details>
            

## Theming

<Theme
  component={'FieldWrapper'}
  label="This is a label"
  overrides={[
    'FieldWrapper.styles.base',
    { key: 'FieldWrapper.Label.styles.base' },
    { key: 'FieldWrapper.DescriptionText.styles.base', props: { description: 'This is a description' } },
    { key: 'FieldWrapper.HintText.styles.base', props: { hint: 'This is a description' } },
    { key: 'FieldWrapper.OptionalText.styles.base', props: { isOptional: true } },
    { key: 'FieldWrapper.RequiredText.styles.base', props: { isRequired: true } },
    { key: 'FieldWrapper.ValidationText.styles.base', props: { validationText: 'This is validation text' } },
    { key: 'FieldWrapper.TooltipTrigger.styles.base', props: { tooltip: 'This is a tooltip' } },
    { key: 'FieldWrapper.TooltipPopover.styles.base', props: { tooltip: 'This is a tooltip' } }
]}>
  <Input />
</Theme>
